<template>
  <div class="forum-bg">
    <div class="forum-banner">
      <div class="banner-content">
        <span class="banner-icon">💬</span>
        <div>
          <div class="banner-title">社区论坛</div>
          <div class="banner-desc">与其他玩家分享攻略、讨论游戏内容、交流心得</div>
        </div>
      </div>
    </div>
    <div class="forum-container">
      <div class="search-card">
        <el-input
          v-model="searchQuery"
          placeholder="搜索帖子标题或内容..."
          class="search-input"
          @keyup.enter="handleSearch"
        >
          <template #suffix>
            <i class="el-icon-search" @click="handleSearch" style="cursor:pointer;"></i>
          </template>
        </el-input>
        <div class="search-options">
          <el-checkbox v-model="searchTitle">搜索标题</el-checkbox>
          <el-checkbox v-model="searchContent">搜索内容</el-checkbox>
        </div>
        <div class="search-filters">
          <span>排序方式：</span>
          <el-select v-model="sortBy" size="small" style="width:110px;" @change="getBlogList">
            <el-option v-for="sort in sortOptions" :key="sort.value" :label="sort.label" :value="sort.value" />
          </el-select>
          <span style="margin-left:1.5rem;">帖子类型：</span>
          <el-select v-model="priority" size="small" style="width:90px;" @change="getBlogList">
            <el-option label="全部" :value="null" />
            <el-option label="普通" :value="0" />
            <el-option label="精华" :value="1" />
            <el-option label="置顶" :value="2" />
          </el-select>
          <span style="margin-left:1.5rem;">分类：</span>
          <el-select v-model="categoryId" size="small" style="width:90px;" @change="getBlogList">
            <el-option label="全部" :value="undefined" />
            <el-option v-for="cat in categories" :key="cat.id" :label="cat.name" :value="cat.id" />
          </el-select>
          <el-button class="search-btn" type="primary" @click="handleSearch" style="margin-left:1.5rem;">搜索</el-button>
          <el-button class="publish-btn" @click="createNewPost">+ 发布新帖</el-button>
        </div>
      </div>
      <div class="forum-content">
        <div class="forum-sidebar">
          <div class="category-list">
            <h3>论坛分类</h3>
            <ul>
              <li v-for="category in categories" :key="category.id">
                <a
                  :class="{ active: categoryId === category.id }"
                  @click.prevent="() => { categoryId = category.id ?? undefined; currentPage = 1; getBlogList(); }"
                  style="display: flex; align-items: center; cursor: pointer; padding: 0.8rem; border-radius: 4px;"
                >
                  <i :class="category.icon"></i>
                  {{ category.name }}
                  <span class="post-count">({{ category.postCount }})</span>
                </a>
              </li>
            </ul>
          </div>
          <div class="hot-tags">
            <h3>热门标签</h3>
            <div class="tag-cloud">
              <router-link 
                v-for="tag in hotTags" 
                :key="tag.id"
                :to="{ name: 'tag', params: { id: tag.id }}"
                class="tag"
              >
                {{ tag.name }}
              </router-link>
            </div>
          </div>
        </div>
        <div class="forum-main">
          <div :class="['post-list', viewMode]">
            <div v-for="post in blogs" :key="post.id" class="post-card" @click="goToBlogDetail(post.id)">
              <div class="post-avatar">
                <img :src="post.cover || '/avatars/default-avatar.jpg'" alt="封面" style="width:48px;height:48px;border-radius:50%">
              </div>
              <div class="post-content">
                <h3 class="post-title">
                  {{ post.title }}
                  <span v-if="post.priority === 2" class="post-badge top">置顶</span>
                  <span v-if="post.priority === 1" class="post-badge essence">精华</span>
                </h3>
                <p class="post-excerpt">{{ post.descr }}</p>
                <div class="post-meta">
                  <span class="post-author">作者ID: {{ post.createUser }}</span>
                  <span class="post-time">{{ post.createTime }}</span>
                  <span class="post-stats">
                    <i class="fas fa-eye"></i> {{ post.readCount }}
                  </span>
                  <span class="post-stats-likes" @click.stop="toggleLike(post)">
                    <i :class="post.likeStatus === 1 ? 'fas fa-heart liked' : 'far fa-heart'"></i> {{ post.likeCount }}
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="pagination">
            <el-select v-model="pageSize" @change="handleSizeChange" size="small" style="width: 100px; margin-right: 1rem;">
              <el-option v-for="n in 10" :key="n" :label="`${n} 条/页`" :value="n" />
            </el-select>
            <button 
              :disabled="currentPage === 1"
              @click="() => { if(currentPage > 1) { currentPage--; getBlogList(); } }"
            >
              上一页
            </button>
            <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
            <button 
              :disabled="currentPage === totalPages"
              @click="() => { if(currentPage < totalPages) { currentPage++; getBlogList(); } }"
            >
              下一页
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request'
import { ElMessage } from 'element-plus'

const router = useRouter()
const currentCategory = ref('all')
const currentSort = ref('latest')
const viewMode = ref('list')
const currentPage = ref(1)
const totalPages = computed(() => Math.max(1, Math.ceil(total.value / pageSize.value)))

const categories = [
  { id: undefined, name: '全部', icon: 'fas fa-home', postCount: 1234 },
  { id: 1, name: '角色讨论', icon: 'fas fa-user', postCount: 456 },
  { id: 2, name: '副本攻略', icon: 'fas fa-dungeon', postCount: 789 },
  { id: 3, name: '剧情解析', icon: 'fas fa-book', postCount: 234 },
  { id: 4, name: '同人创作', icon: 'fas fa-paint-brush', postCount: 567 },
  { id: 5, name: '赛事资讯', icon: 'fas fa-trophy', postCount: 890 }
]

const hotTags = reactive([
  { id: 1, name: '伊莉雅' },
  { id: 2, name: '空洞探险' },
  { id: 3, name: '角色培养' },
  { id: 4, name: '装备搭配' },
  { id: 5, name: '活动攻略' }
])

const categoryId = ref<number | undefined>(undefined)
const sortBy = ref('time')
const order = ref('desc')
const priority = ref<number | null>(null)

const sortOptions = [
  { label: '最新发布', value: 'time' },
  { label: '最多评论', value: 'comment' },
  { label: '最多点赞', value: 'like' },
  { label: '最多浏览', value: 'page_view' }
]

const searchQuery = ref('')
const pageSize = ref(5)
const total = ref(0)
const blogs = ref<Blog[]>([])
const loading = ref(false)

const searchTitle = ref(true)
const searchContent = ref(true)

const getBlogList = async () => {
  try {
    loading.value = true
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value,
      title: searchQuery.value || undefined,
      sortBy: sortBy.value,
      order: order.value,
      categoryId: categoryId.value,
      priority: priority.value
    }
    const response = await request.get('/user/blog/detail', { params })
    const pageResult: PageResult = response.data
    blogs.value = pageResult.records
    total.value = pageResult.total
  } catch (error) {
    console.error('获取博客列表失败:', error)
    ElMessage.error('获取博客列表失败')
  } finally {
    loading.value = false
  }
}

const handleSearch = () => {
  currentPage.value = 1
  getBlogList()
}

const handlePageChange = (page: number) => {
  currentPage.value = page
  getBlogList()
}

const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1
  getBlogList()
}

const createNewPost = () => {
  router.push('/forum/post/new')
}

const goToBlogDetail = (id: number) => {
  router.push(`/forum/blog/${id}`)
}

const toggleLike = async (post: Blog) => {
  const isLiked = post.likeStatus === 1;
  const endpoint = isLiked ? '/user/blog/likedelete' : '/user/blog/like';
  try {
    await request.put(endpoint, { id: post.id });
    post.likeStatus = isLiked ? 0 : 1;
    post.likeCount += isLiked ? -1 : 1;
  } catch (error) {
    ElMessage.error('操作失败');
  }
};

interface Blog {
  id: number
  title: string
  content: string
  descr: string
  cover: string
  tags: string
  createUser: number
  createTime: string
  readCount: number
  categoryId: number
  priority: number
  likeStatus: number
  likeCount: number
}

interface PageResult {
  total: number
  records: Blog[]
}

onMounted(() => {
  getBlogList()
})
</script>

<style scoped>
body, .forum-bg {
  background: #f6f7fb;
}
.forum-bg {
  min-height: 100vh;
  width: 100%;
  background: #f6f7fb;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.forum-banner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 32px;
  border-radius: 20px;
  background: linear-gradient(90deg, #6a8dff 0%, #8f6eff 100%);
  box-shadow: 0 4px 24px 0 rgba(80, 102, 255, 0.08);
  padding: 40px 0 36px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner-content {
  display: flex;
  align-items: center;
  gap: 32px;
}
.banner-icon {
  font-size: 3rem;
  margin-right: 12px;
}
.banner-title {
  font-size: 2.2rem;
  color: #fff;
  font-weight: bold;
  margin-bottom: 8px;
}
.banner-desc {
  color: #e0e6ff;
  font-size: 1.1rem;
}
.forum-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 32px;
  padding: 0 0 32px 0;
}
.search-card {
  width: 100%;
  box-sizing: border-box;
  background: linear-gradient(120deg, #e9edfa 0%, #f6f7fb 100%);
  border-radius: 18px;
  box-shadow: 0 2px 12px 0 rgba(80, 102, 255, 0.06);
  padding: 32px 32px 18px 32px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}
.search-input {
  width: 100%;
  border-radius: 32px;
  background: #fff;
  box-shadow: 0 2px 8px 0 rgba(80, 102, 255, 0.04);
  font-size: 1.1rem;
  padding: 0 18px;
}
.search-options {
  display: flex;
  gap: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.search-filters {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 0.5rem;
  width: 100%;
}
.publish-btn {
  background: linear-gradient(90deg, #6a8dff 0%, #8f6eff 100%);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.7rem 1.8rem;
  margin-left: auto;
  box-shadow: 0 2px 8px 0 rgba(80, 102, 255, 0.08);
  transition: background 0.2s;
}
.publish-btn:hover {
  background: linear-gradient(90deg, #8f6eff 0%, #6a8dff 100%);
}
.forum-content {
  display: flex;
  gap: 2rem;
  width: 100%;
  box-sizing: border-box;
}

.forum-sidebar {
  width: 250px;
  flex-shrink: 0;
}

.category-list {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.category-list h3 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
}

.category-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.category-list li {
  margin-bottom: 0.5rem;
}

.category-list a {
  display: flex;
  align-items: center;
  padding: 0.8rem;
  color: #666;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.category-list a:hover,
.category-list a.active {
  background-color: #f5f5f5;
  color: #42b983;
}

.category-list i {
  margin-right: 0.5rem;
  width: 20px;
  text-align: center;
}

.post-count {
  margin-left: auto;
  font-size: 0.9rem;
  color: #999;
}

.hot-tags {
  background: white;
  border-radius: 8px;
  padding: 1rem;
}

.hot-tags h3 {
  margin: 0 0 1rem 0;
  color: #2c3e50;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  padding: 0.3rem 0.8rem;
  background-color: #f5f5f5;
  color: #666;
  border-radius: 16px;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background-color 0.3s;
}

.tag:hover {
  background-color: #42b983;
  color: white;
}

.forum-main {
  flex: 1;
  min-width: 0;
}

.filter-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.filter-group {
  display: flex;
  gap: 0.5rem;
}

.filter-group button {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.filter-group button.active {
  background-color: #42b983;
  color: white;
  border-color: #42b983;
}

.view-options {
  display: flex;
  gap: 0.5rem;
}

.view-options button {
  padding: 0.5rem;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.view-options button.active {
  background-color: #f5f5f5;
  border-color: #42b983;
  color: #42b983;
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.post-list.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1rem;
}

.post-card {
  background: white;
  border-radius: 8px;
  padding: 1rem;
  display: flex;
  gap: 1rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.post-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.post-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.post-content {
  flex: 1;
}

.post-title {
  margin: 0 0 0.5rem 0;
  font-size: 1.1rem;
}

.post-title a {
  color: #2c3e50;
  text-decoration: none;
}

.post-excerpt {
  color: #666;
  margin: 0.5rem 0;
  font-size: 0.9rem;
}

.post-meta {
  display: flex;
  gap: 1rem;
  font-size: 0.9rem;
  color: #999;
}

.post-meta i {
  margin-right: 0.3rem;
}

.post-stats-likes {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.post-stats-likes .liked {
  color: #ff6b6b;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}

.pagination button {
  padding: 0.5rem 1rem;
  border: 1px solid #ddd;
  background: white;
  border-radius: 4px;
  cursor: pointer;
}

.pagination button:disabled {
  background-color: #f5f5f5;
  cursor: not-allowed;
}

.page-info {
  color: #666;
}

.post-badge {
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-left: 0.5rem;
}
.post-badge.top {
  background-color: #ff6b6b;
  color: white;
}
.post-badge.essence {
  background-color: #ffd93d;
  color: #2c3e50;
}
</style> 